<template>
	<view class="container">
		<!-- 内容区域包装器 -->
		<view class="content-wrapper">
			<!-- 搜索区域 -->
			<view class="search-box">
				<u-search placeholder="请输入关键搜索" v-model="formData.kw" :show-action="false" :clearabled="true"
					:animation="false" shape="round" bgColor="#F5F6FA" height="72rpx" searchIconColor="#999999"
					placeholderColor="#999999" @change="changekeword" :inputStyle="{
						color: '#333333',
						backgroundColor: '#F5F6FA',
					}"></u-search>
				<view class="add-btn" @click="handleToAdd">
					<u-icon name="plus-circle" size="40rpx" color="#FE4F04"></u-icon>
				</view>
			</view>
			<view class="sort-box">
				<view class="sort-item" @click="changeSort('start_time')">
					<span>起租日</span>
					<img class="sort-icon" src="@/static/sort_asc.png" alt="" v-if="formData.sort_way == 'asc'" />
					<img class="sort-icon" src="@/static/sort_desc.png" alt="" v-else />
				</view>
				<!-- <view class="sort-item" @click="changeSort('amountOrder')">
					<span>余额</span>
					<img class="sort-icon" src="@/static/sort_asc.png" alt="" v-if="formData.amountOrder == 'asc'" />
					<img class="sort-icon" src="@/static/sort_desc.png" alt="" v-else />
				</view> -->
			</view>
		</view>
		<view class="content-box">
			<view class="content-total">
				共 {{total}} 位成员，点击姓名可查看详情
			</view>
			<view class="empty-review" v-if="list.length == 0">
				<image src='../static/images/empty-review.png' mode="aspectFit"></image>
			</view>
			<view class="content-list">
				<view class="content-item" v-for="item in list" :key="item.id" @click="handleToDetail(item)">
					<view class="content-item-cell" style="margin-bottom: 8rpx;">
						<view class="content-item-name"> {{item.name}} </view>
						<view class="content-item-type"> {{item.start_time || ''}} </view>
					</view>
					<view class="content-item-cell" style="margin-bottom: 14rpx;">
						<view class="content-item-mobile"> {{item.mobile}} </view>
						<view class="content-item-date" v-if="item.is_black=='1'"> 已拉黑 </view>
						<view class="content-item-date" v-else> {{statusMap[item.status] || '没有合同'}} </view>
					</view>
					<view class="content-item-cell" v-if="item.wechat">
						<view class="content-item-wechat"> 微信：{{item.wechat}} </view>
					</view>
					<view class="content-item-opt" v-if="pageType!=='select'">
						<!-- <u-button :custom-style="yaoQingBtnStyle" @click.native.stop="invite(item)">发起邀请</u-button> -->
						<u-button :custom-style="boHaoBtnStyle" @click.native.stop="makePhoneCall(item.mobile)">拨
							号</u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-btn">
			<view class="btn" @click="showType = true">
				{{typeName}}
			</view>
			<view class="btn ellipsis" @click="handleSelectBuilding">
				{{buildingName}}
			</view>
			<view class="btn" @click="handleShaiXuan">
				筛选
			</view>
		</view>

		<u-picker :show="showType" :columns="typeList" keyName="value" @confirm="confirmType" @cancel="showType=false"
			confirmColor="#FE4F04"></u-picker>

		<u-popup :show="showShaiXuan" mode="bottom" round>
			<view class="" style="padding: 40rpx 20rpx 20rpx">
				<u-form :model="formTemp" labelWidth="0">
					<u-form-item>
						<view class="form-flex">
							<span class="form-label">状态</span>
							<u-radio-group v-model="formTemp.contract_status" activeColor="#FE4F04">
								<u-radio :name="status.key" :label="status.value" v-for="(status,index) in statusList"
									:key="index"></u-radio>
							</u-radio-group>
						</view>
					</u-form-item>
					<!-- <u-form-item>
						<view class="form-flex">
							<span class="form-label">微信</span>
							<u-radio-group v-model="formTemp.wechat" activeColor="#FE4F04">
								<u-radio :name="wechat.key" :label="wechat.value" v-for="(wechat,index) in wechatList"
									:key="index"></u-radio>
							</u-radio-group>
						</view>
					</u-form-item> -->
					<u-form-item>
						<view class="shaixuan-opt">
							<u-button :custom-style="yaoQingBtnStyle" @click="showShaiXuan = false">取消</u-button>
							<u-button :custom-style="boHaoBtnStyle" @click="confirmShaiXuan()">确认</u-button>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</u-popup>
	</view>
</template>


<script>
	import {
		customerIndex
	} from "@/api/part2"
	export default {
		data() {
			return {
				pageType: '', // 页面类型 list 列表 select选择
				formData: {
					page: 1,
					page_size: 10,
					kw: '',
					type: '',
					contract_status: '',
					wechat: '',
					build_id: '',
					sort: 'start_time',
					sort_way: 'asc'
				},
				typeName: '类型',
				buildingName: '全部大楼',
				total: 0,
				list: [],

				formTemp: {
					contract_status: '',
					wechat: '',
				},
				showType: false,
				showShaiXuan: false,
				typeList: [
					[{
						key: '',
						value: '全部'
					}, {
						key: '1',
						value: '个人'
					}, {
						key: '2',
						value: '公司'
					}]
				],
				statusList: [{
					key: '',
					value: '全部'
				}, {
					key: '0',
					value: '待审核'
				}, {
					key: '1',
					value: '正常'
				}, {
					key: '2',
					value: '过期'
				}],
				wechatList: [{
					key: '',
					value: '全部'
				}, {
					key: '1',
					value: '已关联'
				}, {
					key: '2',
					value: '未关联'
				}],

				yaoQingBtnStyle: {
					background: "#FFF",
					boShadow: "0rpx 4rpx 8rpx 0rpx rgba(254,79,4,0.5)",
					borderRadius: "44rpx",
					fontSize: "26rpx",
					color: "#FE4F04",
					height: "64rpx",
					width: "152rpx",
					border: "2rpx solid #FE4F04",
					margin: "0",
					padding: "0"
				},
				boHaoBtnStyle: {
					background: "#FE4F04",
					boShadow: "0rpx 4rpx 8rpx 0rpx rgba(254,79,4,0.5)",
					borderRadius: "44rpx",
					fontSize: "26rpx",
					color: "#FFFFFF",
					height: "64rpx",
					width: "152rpx",
					margin: "0",
					padding: "0"
				},
				timerId: null,
				statusMap: {
					'0': '待审核',
					'1': '正常',
					'2': '过期'
				}
			};
		},
		onLoad(options) {
			if (options.kw) {
				this.formData.kw = options.kw
			}
			if (options && options.pageType) {
				this.pageType = options.pageType
			}

			uni.$on('buildingSelected', (building) => {
				console.log(building)
				this.formData.build_id = building.id
				this.buildingName = building.address
				this.changekeword()
			});
		},
		onUnload() {
			uni.$off('buildingSelected'); // 避免内存泄漏
		},
		onShow() {
			this.changekeword()
		},
		onHide() {
			if (this.timerId) {
				clearInterval(this.timerId)
			}
		},
		async onReachBottom() {
			if (this.list.length < this.total) {
				this.formData.page++
				this.init()
			}
		},
		methods: {
			init() {
				customerIndex(this.formData).then(res => {
					console.log(res.data.data);
					res.data.data.data.forEach((item) => {
						this.list.push(item)
					})
					this.total = res.data.data.total
				})
			},
			changekeword() {
				if (this.timerId) {
					clearInterval(this.timerId)
				}
				let that = this
				this.timerId = setTimeout(() => {
					that.handleFilter()
				}, 200)
			},
			handleFilter() {
				this.formData.page = 1
				this.list = []
				this.init()
			},
			changeSort(sort) {
				if (this.formData.sort == sort) {
					this.formData.sort_way = this.formData.sort_way == 'asc' ? 'desc' : 'asc'
				} else {
					this.formData.sort_way = 'asc'
				}
				this.formData.sort = sort
				this.handleFilter()
			},
			handleToAdd() {
				uni.navigateTo({
					url: '/pages-landlord/customer/detail'
				})
			},
			handleToDetail(item) {
				console.log(item)
				if (this.pageType === 'select') {
					uni.$emit('customerSelected', item)
					uni.navigateBack()
					return
				} else {
					uni.navigateTo({
						url: '/pages-landlord/customer/detail?id=' + item.id
					})
				}
			},
			invite(item) {
				uni.$u.toast('暂时不支持，需要协商')
			},
			// 拨打电话
			makePhoneCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber, // 电话号码
					success: () => {
						console.log("拨号成功");
					},
					fail: (err) => {
						console.log("拨号失败:", err);
					}
				});
			},
			confirmType(value) {
				console.log(value)
				this.formData.type = value.value[0].key
				this.typeName = value.value[0].value
				this.showType = false
				this.handleFilter()
			},
			handleSelectBuilding() {
				uni.navigateTo({
					url: '/pages-landlord/announcement/chooseBuilding?showAll=1'
				})
			},
			handleShaiXuan() {
				this.showShaiXuan = true
				this.formTemp.contract_status = this.formData.contract_status
				this.formTemp.wechat = this.formData.wechat
			},
			confirmShaiXuan() {
				this.formData.contract_status = this.formTemp.contract_status
				this.formData.wechat = this.formTemp.wechat
				this.showShaiXuan = false
				this.handleFilter()
			}
		},
	};
</script>

<style lang="less" scoped>
	.container {
		padding-bottom: 120rpx;
	}

	.search-box {
		padding: 12rpx 20rpx 24rpx 32rpx;
		background-color: #fff;
		display: flex;

		.add-btn {
			padding: 20rpx;
		}
	}

	.sort-box {
		padding: 0 40rpx 32rpx 32rpx;
		display: flex;
		gap: 26rpx;
		background-color: #fff;

		.sort-item {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;

			padding: 18rpx 24rpx;
			background: #F5F6FA;
			border-radius: 12rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #202020;
			line-height: 36rpx;

			.sort-icon {
				width: 12rpx;
				height: 24rpx;
			}
		}
	}

	.content-box {
		padding: 0 32rpx;
	}

	.content-total {
		padding: 16rpx 0;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #999999;
	}

	.content-item {
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.01);
		border-radius: 24rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
	}

	.content-item-cell {
		display: flex;
		justify-content: space-between;
		align-items: center;

		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		line-height: 36rpx;

		.content-item-name {
			font-family: PingFangHK, PingFangHK;
			font-weight: 700;
			font-size: 30rpx;
			color: #222222;
			line-height: 42rpx;
		}

		.content-item-type {}

		.content-item-mobile {
			color: #444444;
		}

		.content-item-date {}

		.content-item-wechat {
			font-size: 20rpx;
			color: #999999;
			line-height: 28rpx;
		}
	}

	.content-item-opt {
		display: flex;
		justify-content: flex-end;
		gap: 24rpx;
		padding: 12rpx 0;
	}

	.bottom-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		/* 关键样式 - 使用 constant 和 env 兼容不同设备 */
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
		/* 其他样式按需添加 */
		background: #FFFFFF;


		display: flex;
		justify-content: space-between;

		.btn {
			padding: 30rpx 64rpx;
			font-weight: 700;
			font-size: 30rpx;
			color: #161616;
			line-height: 42rpx;
			white-space: nowrap;
		}
	}


	.form-flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.form-label {
		margin-right: 10rpx;

		.label-required {
			color: #FF0000;
			padding: 0 4rpx;
		}
	}

	.customer-input,
	.building-input {
		display: flex;
		align-items: center;
	}

	.shaixuan-opt {
		display: flex;
		justify-content: flex-end;
		gap: 24rpx;
		padding: 12rpx 0;
	}

	/deep/ .u-radio-group--row {
		gap: 30rpx;
		justify-content: flex-end;
		align-items: center;
	}

	.ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.empty-review {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 48rpx 0;
	
		image {
			width: 328rpx;
			height: 208rpx;
			margin-bottom: 24rpx;
		}
	}
</style>